<template>
  <view class="page">
    <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
      <view class="top">
        <view class="performanceInfo">
          <view class="title">
            {{ checkTicketInfo.performanceTitle }}
          </view>
          <view class="line"></view>
          <view class="showTime">
            {{ formatDateTime2WeekDate(checkTicketInfo.showTime) }}
          </view>
          <view class="venueName">
            {{ checkTicketInfo.venueName }}
          </view>
          <view class="venueName">
            <span>票品提供: 熊熊票务 </span>
          </view>
          <view class="ticket">
            <view>
              {{ checkTicketInfo.ticketName }}
            </view>
            <view>
              {{ checkTicketInfo.buyCount }}张
            </view>
          </view>
          <view class="line"></view>

          <view class="tips">
            <uni-icons color="#FF2E79" type="flag-filled" size="12"></uni-icons>
            开场前7天无理由退款
            <uni-icons style="margin-left: 10px" type="checkbox" size="12"></uni-icons>
            无票赔付上线 票款100%
          </view>
        </view>
      </view>
      <view class="operation">
        <view class="info">
          <view class="title">接收人:</view>
          <input class="uni-input" v-model="recipientName" type="name"
                 placeholder="请输入接收人姓名"/>
        </view>
        <view class="info">
          <view class="title">手机号:</view>
          <input class="uni-input" v-model="recipientPhoneNumber" type="phone"
                 placeholder="请输入接收人手机号码"/>
        </view>
        <view class="line"></view>

        <view class="selectSpectator" @click="showPopUp">
          <view style="font-size: 16px;">
            实名观演人
          </view>
          <view class="tips">
            已选择{{ selectSpectatorList.length }}/{{ checkTicketInfo.buyCount }}位，请选择实名观演人观看演出
          </view>
        </view>
        <view class="showSpectator">
          <view class="showItem" v-for="(item,index) in selectSpectatorList" :key="index">
            <view>
              <view class="spectatorName">
                {{ item.spectatorName }}
              </view>
              <view>
                <view class="certificateType">
                  身份证:
                </view>
                <span style=" color: #BABABE;">  {{ item.certificateNumber }} </span>
              </view>
            </view>
            <view @click="clickSpectator(item)">
              <uni-icons color="#95949D" type="clear" size="20"></uni-icons>
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="protect">
          <view style="font-size: 16px;">
            号码保护
          </view>
          <uni-icons color="#52c72e" type="checkbox-filled" size="16"></uni-icons>
        </view>

        <view class="bottom">
          我已阅读并同意 <span style="color: #0073ad">《熊熊轮票务平台交易服务协议》《服务保障条款》</span>
        </view>
      </view>
    </scroll-view>
    <uni-popup ref="popup" @change="popChange" background-color="#fff" type="bottom">
      <view class="pop">
        <scroll-view style="height: calc(100% - 100upx)" scroll-y="true" scroll-with-animation="true">
          <view class="popTitle">请选择观影人</view>
          <view class="list">
            <view class="item" @click="clickSpectator(item)" v-for="(item,index) in spectatorList" :key="index">
              <view class="left">
                <view class="leftWrapper">
                  <checkbox disbaled style="margin-right: 20px" value="cb" :checked="needCheck(item)"/>
                  <view>
                    <view>
                      <view>
                        {{ item.spectatorName }}
                      </view>
                    </view>
                    <view>
                      <span style="font-size: 15px;">身份证</span><span class="number"> {{
                        ' ' + item.certificateNumber
                      }}</span>
                    </view>
                    <view>
                      <span style="font-size: 15px;">手机号</span> <span class="number"> {{
                        ' ' + item.spectatorPhoneNumber
                      }}</span>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="submitSelected">
          <view class="submitBtn" @click="popClose">确认选择</view>
        </view>
      </view>
    </uni-popup>
    <view v-show="!hideBottom" class="submitBox">
      <view class="left">
        <view>
          票款：<span style="font-size: 16px; font-weight: bold;">{{ checkTicketInfo.payAmount }}</span>
          <span style="font-size: 13px; font-weight: bold;">元</span>
        </view>
        <view class="tips">
          支持有条件退款
        </view>
      </view>
      <view class="submitBtn" @click="submitOrder"> 提交订单</view>
    </view>

    <uni-popup ref="warning" type="dialog">
      <uni-popup-dialog cancelText="取消" confirmText="确定" title="订单支付提醒"
                        :content="'是否支付【'+orderPayInfo.payAmount+'元】'"
                        @close="toInfo"
                        @confirm="doPay"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {getTicketBuyInfo} from "../../api/user/ticket";
import {getSpectatorList} from "../../api/user/spectator";
import {createOrder, payTicketOrder} from "../../api/user/order";
import {formatDateTime2WeekDate} from "../../utils/DateUtils";

export default {
  data() {
    return {
      hideBottom: false,
      buyCount: 0,
      ticketId: null,
      checkTicketInfo: {},
      selectSpectatorList: [],
      spectatorList: [],
      recipientName: '',
      recipientPhoneNumber: '',
      orderPayInfo: {},
    }
  },
  onShow() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curParam = routes[routes.length - 1].options; //获取路由参数
    this.buyCount = curParam.count;
    this.ticketId = curParam.ticketId;
    this.getCheckedTicket();
  },
  methods: {
    formatDateTime2WeekDate,
    getCheckedTicket() {
      getTicketBuyInfo({ticketId: this.ticketId, count: this.buyCount}).then(res => {
        if (res.success) {
          this.checkTicketInfo = res.data;
        }
      })
    },
    showPopUp() {
      getSpectatorList().then(res => {
        this.spectatorList = res.data;
        this.hideBottom = true;
        this.$refs.popup.open('bottom');
      })
    },
    // 打开被隐藏的底部按钮
    popChange(isOpen) {
      if (!isOpen.show) {
        this.hideBottom = false;
      }
    },
    popClose() {
      this.$refs.popup.close('bottom');
    },
    clickSpectator(item) {
      let idx = this.selectSpectatorList.findIndex(p => p.spectatorId === item.spectatorId);
      if (-1 === idx) {
        // 尝试加入
        if (this.selectSpectatorList.length < this.checkTicketInfo.buyCount) {
          this.selectSpectatorList.push(item);
        } else {
          wx.showToast({
            title: "不可超过票面数!",
            icon: "error",
            duration: 2000,
          });
        }
      } else {
        // 移除
        this.selectSpectatorList.splice(idx, 1);
      }
    },
    needCheck(item) {
      return -1 !== this.selectSpectatorList.findIndex(p => p.spectatorId === item.spectatorId);
    },
    submitOrder() {
      if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.recipientPhoneNumber)) {
        wx.showToast({
          title: '请输入合法手机号码',
          icon: "error",
          duration: 2000,
        });
        return;
      }
      if (this.recipientName.length === 0) {
        wx.showToast({
          title: '接收人姓名不能为空',
          icon: "error",
          duration: 2000,
        });
        return;
      }
      if (this.selectSpectatorList.length != this.buyCount) {
        wx.showToast({
          title: '观影人数错误',
          icon: "error",
          duration: 2000,
        });
        return;
      }
      createOrder({
        ticketId: this.ticketId,
        buyCount: this.buyCount,
        recipientName: this.recipientName,
        recipientPhoneNumber: this.recipientPhoneNumber,
        spectatorList: this.selectSpectatorList
      }).then(res => {
        if (res.success) {
          this.orderPayInfo = res.data;
          this.$refs.warning.open();
        } else {
          wx.showToast({
            title: res.message,
            icon: "error",
            duration: 2000,
          });
        }
      })
    },
    toInfo() {
      uni.navigateTo({
        url: `/subpkg/order-info/order-info?orderId=${this.orderPayInfo.orderId}`,
      });
    },
    doPay() {
      payTicketOrder(this.orderPayInfo.payOrderId).then(res => {
        let _this = this;
        if (res.success) {
          wx.showToast({
            title: '支付成功！',
            icon: "success",
            duration: 2000,
            complete: () => {
              _this.toInfo();
            }
          });
        }
      })
    }

  }
}
</script>

<style lang="scss">
.page {
  height: calc(100% - 150upx);
}

.top {
  background-color: #7370E4;
  padding: 12px 12px 30px;

  .performanceInfo {
    background-color: white;
    padding: 15px;
    border-radius: 8px;

    .title {
      margin-bottom: 12px;
      font-size: 18px;
      width: 100%;
      height: 30px;
    }


    .showTime {
      margin-bottom: 3px;
      font-size: 14px;
      color: #a8a8a8;
    }

    .venueName {
      margin-bottom: 3px;
      font-size: 14px;
      color: #a8a8a8;
    }

    .ticket {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-top: 10px;
    }

    .tips {
      font-size: 14px;
    }
  }

}

.line {
  background-color: rgba(229, 229, 229, 0.79);
  margin: 10px 0;
  width: 100%;
  height: 1px;
}

.operation {
  z-index: 99;
  position: relative;
  top: -18px;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
  padding: 20px 26px;
  background-color: white;

  .info {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .uni-input {
      width: 70%;
      height: 38px;
    }
  }

  .selectSpectator {
    margin-top: 20px;

    .tips {
      margin-top: 6px;
      font-size: 14px;
      color: #BABABE;
    }
  }

  .showSpectator {
    margin-top: 10px;

    .showItem {
      background-color: #F6F6F7;
      margin-bottom: 6px;
      padding: 10px;
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;


      .spectatorName {
        margin-bottom: 6px;
      }

      .certificateType {
        color: #BABABE;
        display: inline-block;
        margin-right: 20px;
      }
    }
  }


  .protect {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .bottom {
    font-size: 12px;
    padding: 10px;
    background-color: #F6F6F7;
  }
}

.pop {
  height: 400px;
  background-color: white;

  .popTitle {
    margin-top: 20px;
    width: 100%;
    text-align: center;
  }

  .list {
    padding: 10px;

    .item {
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 10px;
      padding: 10px 10px;
      display: flex;
      align-items: center; /* Align children vertically */

      .left {
        margin-left: 10px;
        width: 80%;

        .leftWrapper {
          display: flex;
          align-items: center;
        }

        .number {
          font-size: 14px;
        }
      }

      .right {
        width: 20%;
        font-size: 15px;
        text-align: center;
        color: red;
      }
    }
  }

  .submitSelected {
    position: fixed;
    display: flex;
    padding: 5px;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 120upx;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e5e5e5;

    .submitBtn {
      height: 70%;
      width: 80%;
      background: linear-gradient(to right, #FF7E81, #FF2E79);
      border-radius: 24px;
      text-align: center;
      color: white;
      line-height: 90upx;
    }
  }
}

.submitBox {
  position: fixed;
  display: flex;
  padding: 5px;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 130upx;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e5e5;

  .left {
    width: 30%;

    .tips {
      margin-top: 3px;
      font-size: 14px;
      color: #BABABE;
    }
  }

  .submitBtn {
    margin-bottom: 10px;
    height: 70%;
    width: 60%;
    background: linear-gradient(to right, #FF7E81, #FF2E79);
    border-radius: 24px;
    text-align: center;
    color: white;
    line-height: 90upx;
  }
}
</style>
